﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IndustrialChart Sample with Oracle Connection</title>
    <style type="text/css">        
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:900px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;margin-left:5%;}
        .template .titleTemp{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%;margin-left:2.5%;}
        .template .sample{background:#FFFFFF;min-width:850px;width:95%;min-height:575px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}        
    </style>       
    <link href="../Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css" />
    <link href="../Widgets/IndustrialChart/Styles/IndustrialChart.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="../Widgets/IndustrialChart/Scripts/dateformat.js" type="text/javascript"></script>
    <script src="../Widgets/IndustrialChart/Scripts/canvastext.js" type="text/javascript"></script>
    <!--[if IE]>      
    <script type="text/javascript" src="../Widgets/IndustrialChart/Scripts/excanvas.js"></script>
    <![endif]-->        
    <script src="../Widgets/IndustrialChart/Scripts/IndustrialChart.js" type="text/javascript"></script>
    
    <style type="text/css">        
        body{background:#909090; top:0px; left:0px; margin:0px;}
        div.style {width:250px;height:22px;margin-left:55%;margin-top:25px;font-family:Calibri,Microsoft Sans Serif;font-size:12px;position:absolute;}
        .style p {color:#303030;width:95px;float:left;margin-top:4px;}
        .style select{float:left;margin-left:5px;width:120px;font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        .menuContainer{margin-top:25px;height:auto; width:90%; padding:10px;}
    </style>   
</head>
<body style="">     
     <script language="javascript" type="text/javascript">
         var ic;
         window.onload = function () {
             //Set Initial Options, using "CallProcedure" method, also set the procedure.             
             var options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.spGetIndustrialChart' }
                            , 'AllowResize': true };

             //Create an Instance of IndustrialChart
             ic = new IndustrialChart(document.getElementById('pIC'), options);
             //Refresh Widget
             ic.RefreshData();
         };
    </script>       
        <div class="template">
                <div class="titleTemp">Industrial Chart Example.</div>
                <div class="sample">                    
                    <div id="pIC" style="position:relative;height:550px;width:98%;margin-top:25px;left:0px;margin-left:1%;"></div>                                    
                </div>
                <div class="content" style='text-align:left;padding:20px;width:92%;'>
                    <p> In this example, the javascript code needed to invoke the stored procedure <i>dbo.spGetIndustrialChart</i> is:  </p>
                    <pre style='background-color:#E0E0F0;width:98%;'>                    
                        attachDomReadyEventHandler(function() {   
                            //Set Initial Options, using "CallProcedure" method, also set the procedure.                          
                            var options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': <span style='color:red '>'dbo.spGetIndustrialChart'</span> };
                            //Create an Instance of IndustrialChart
                            ic = new IndustrialChart(document.getElementById('pIC'), options);
                            //Refresh Widget
                            ic.RefreshData();
                        });
                    </pre>
                </div>
        </div>  
</body>
</html>
